<template>
    <div>
        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <!--:data="currentData"=========》当前页用的数据-->
                    <el-table
                            :header-cell-style="header_style"
                            :cell-style="cell_style"
                            :data="currentData"
                            border
                            style="width: 100%;text-align: center;">
                        <el-table-column
                                prop="v_id"
                                label="工号">
                        </el-table-column>
                        <el-table-column
                                prop="v_name"
                                label="姓名"
                                v-model="item.name">
                        </el-table-column>
                        <el-table-column
                                prop="v_src"
                                label="头像">
                        </el-table-column>
                        <el-table-column
                                prop="v_sex"
                                label="性别">
                        </el-table-column>
                        <el-table-column
                                prop="v_tel"
                                label="电话">
                        </el-table-column>
                        <el-table-column
                                prop="v_email"
                                label="邮箱">
                        </el-table-column>
                        <el-table-column
                                prop="v_idcard"
                                label="身份证号">
                        </el-table-column>
                        <el-table-column
                                prop="v_address"
                                label="家庭住址">
                        </el-table-column>
                        <el-table-column
                                prop="v_useracc"
                                label="账号">
                        </el-table-column>
                        <el-table-column
                                prop="v_userpwd"
                                label="密码">
                        </el-table-column>
                        <el-table-column
                                prop="v_position"
                                label="职位">
                        </el-table-column>
                        <el-table-column
                                prop="v_department"
                                label="部门">
                        </el-table-column>
                        <el-table-column
                                prop="v_leader"
                                label="直属领导">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="150px">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleEdit(scope.$index, scope.row)">修改
                                </el-button>
                                <!--================这是点击修改以后弹出的模态框=======================================-->
                                <el-dialog
                                        title="修改详情"
                                        :visible.sync="dialogVisible"
                                        width="30%"
                                        :before-close="handleClose">
                                    <label for="Id" class="xiugailab">工号</label>
                                    <input type="text" id="Id" class="xiugaiinput" v-model="item.id" disabled style="border: 1px solid red">
                                    <label for="Name" class="xiugailab">姓名</label>
                                    <input type="text" id="Name" class="xiugaiinput" v-model="item.name">
                                    <label for="Src" class="xiugailab">头像</label>
                                    <input type="text" id="Src" class="xiugaiinput" v-model="item.src">
                                    <label for="Sex" class="xiugailab">性别</label>
                                    <input type="text" id="Sex" class="xiugaiinput" v-model="item.sex">
                                    <label for="Tel" class="xiugailab">电话</label>
                                    <input type="text" id="Tel" class="xiugaiinput" v-model="item.tel">
                                    <label for="Email" class="xiugailab">邮箱</label>
                                    <input type="text" id="Email" class="xiugaiinput" v-model="item.email">
                                    <label for="Idcard" class="xiugailab">身份证号</label>
                                    <input type="text" id="Idcard" class="xiugaiinput" v-model="item.idcard">
                                    <label for="Address" class="xiugailab">家庭住址</label>
                                    <input type="text" id="Address" class="xiugaiinput" v-model="item.address">
                                    <label for="Useracc" class="xiugailab">账号</label>
                                    <input type="text" id="Useracc" class="xiugaiinput" v-model="item.useracc" disabled style="border: 1px solid red">
                                    <label for="Userpwd" class="xiugailab">密码</label>
                                    <input type="text" id="Userpwd" class="xiugaiinput" v-model="item.userpwd">
                                    <label for="Position" class="xiugailab">职位</label>
                                    <input type="text" id="Position" class="xiugaiinput" v-model="item.position">
                                    <label for="Department" class="xiugailab">部门</label>
                                    <input type="text" id="Department" class="xiugaiinput" v-model="item.department">
                                    <div style="text-align: left;margin-left: 2px">
                                        <label for="Leader" class="xiugailab">直属领导</label>
                                        <input type="text" id="Leader" class="xiugaiinput" v-model="item.leader">
                                    </div>
                                    <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="QRXG">确认修改</el-button>
                                    </span>
                                </el-dialog>
                                <!--================这是点击修改以后弹出的模态框=======================================-->
                                <el-button
                                        size="mini"
                                        type="danger"
                                        class="btnxg"
                                        @click="handleDelete(scope.$index, scope.row)"
                                >删除
                                </el-button>

                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block"><!--这里是分页-->
                        <el-pagination
                                layout="prev, pager, next"
                                :total="dataNum"
                                :page-size="5"
                                :page-count="7"
                                @current-change="changePage">

                            <!--                            :total="dataNum" ===》数据总条数-->
                            <!--                            :page-size="5" ===》每页5条数据-->
                            <!--                            :page-count="7"===》当超过7页的时候，分页显示省略号-->
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="添加员工" name="second">
                    <div >
<!--                        <label for="tjid" class="tjlab">工号</label>-->
<!--                        <input type="text" id="tjid" class="tjinput" v-model="tjitem.id" disabled-->
<!--                               style="border: 1px solid red">-->
                        <label for="tjname" class="tjlab">姓名</label>
                        <input type="text" id="tjname" class="tjinput" v-model="tjitem.name" placeholder="请输入姓名">
                        <label for="tjsrc" class="tjlab">头像</label>
                        <input type="text" id="tjsrc" class="tjinput" v-model="tjitem.src" placeholder="请输入头像">
                    </div>
                    <div>
                        <label for="tjsex" class="tjlab">性别</label>
                        <input type="text" id="tjsex" class="tjinput" v-model="tjitem.sex" placeholder="请输入性别">
                        <label for="tjtel" class="tjlab">电话</label>
                        <input type="text" id="tjtel" class="tjinput" v-model="tjitem.tel" placeholder="请输入电话">
                    </div>
                    <div>
                        <label for="tjemail" class="tjlab">邮箱</label>
                        <input type="text" id="tjemail" class="tjinput" v-model="tjitem.email" placeholder="请输入邮箱">
                        <label for="tjidcard" class="tjlab">身份证号</label>
                        <input type="text" id="tjidcard" class="tjinput" v-model="tjitem.idcard" placeholder="请输入身份证号">
                    </div>
                    <div>
                        <label for="tjaddress" class="tjlab">家庭住址</label>
                        <input type="text" id="tjaddress" class="tjinput" v-model="tjitem.address"
                               placeholder="请输入家庭住址">
                        <label for="tjposition" class="tjlab">职位</label>
                        <input type="text" id="tjposition" class="tjinput" v-model="tjitem.position"
                               placeholder="请输入职位">
                    </div>

<!--                    <div>-->
<!--                        <label for="tjuseracc" class="tjlab">账号</label>-->
<!--                        <input type="text" id="tjuseracc" class="tjinput" v-model="tjitem.useracc" placeholder="请输入账号">-->
<!--                        <label for="tjuserpwd" class="tjlab">密码</label>-->
<!--                        <input type="text" id="tjuserpwd" class="tjinput" v-model="tjitem.userpwd" placeholder="请输入密码">-->
<!--                    </div>-->

                    <div>
                        <label for="tjdeparment" class="tjlab">部门</label>
                        <input type="text" id="tjdeparment" class="tjinput" v-model="tjitem.department"
                               placeholder="请输入部门">
                        <label for="tjleader" class="tjlab">直属领导</label>
                        <input type="text" id="tjleader" class="tjinput" v-model="tjitem.leader">
                    </div>

                    <div>
                        <el-button id="btnqrtj" class="btnqrtj" @click="QRTJ" type="text">确认添加</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="查询员工" name="third">
                    <div id="ssdiv" class="clear">
                        <label for="ssinput" id="sslab">搜索</label>
                        <div id="sspotions">
                            <template>
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>


                        <input type="text" id="ssinput" v-model="ssitem" placeholder="请输入查询的条件">
                        <el-button class="btnqrtj" @click="QRSS" type="text">确认搜索</el-button>
                    </div>
                    <div>
                        <el-table
                                :header-cell-style="header_style"
                                :cell-style="cell_style"
                                :data='sscurrentData'
                                border
                                style="width: 100%;margin: 0 auto;">
                            <el-table-column
                                    prop="v_id"
                                    label="工号">
                            </el-table-column>
                            <el-table-column
                                    prop="v_name"
                                    label="姓名">
                            </el-table-column>
                            <el-table-column
                                    prop="v_src"
                                    label="头像">
                            </el-table-column>
                            <el-table-column
                                    prop="v_sex"
                                    label="性别">
                            </el-table-column>
                            <el-table-column
                                    prop="v_tel"
                                    label="电话">
                            </el-table-column>
                            <el-table-column
                                    prop="v_email"
                                    label="邮箱">
                            </el-table-column>
                            <el-table-column
                                    prop="v_idcard"
                                    label="身份证号">
                            </el-table-column>
                            <el-table-column
                                    prop="v_address"
                                    label="家庭住址">
                            </el-table-column>
                            <el-table-column
                                    prop="v_useracc"
                                    label="账号">
                            </el-table-column>
                            <el-table-column
                                    prop="v_userpwd"
                                    label="密码">
                            </el-table-column>
                            <el-table-column
                                    prop="v_position"
                                    label="职位">
                            </el-table-column>
                            <el-table-column
                                    prop="v_department"
                                    label="部门">
                            </el-table-column>
                            <el-table-column
                                    prop="v_leader"
                                    label="直属领导">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="150px">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini "
                                            type="primary"
                                            @click="ssxiugai(scope.$index, scope.row)"
                                    >修改
                                        <!--                                        @click="handleEdit(scope.$index, scope.row)"-->
                                    </el-button>
                                    <!--================这是点击修改以后弹出的模态框=======================================-->
                                    <el-dialog
                                            title="修改详情"
                                            width="30%"
                                            :before-close="handleClose"
                                            :visible.sync="ssxgdialogVisible">
                                        <label for="ssid" class="xiugailab">工号</label>
                                        <input type="text" id="ssid" class="xiugaiinput" v-model="ssxgitem.id" disabled style="border: 1px solid red">
                                        <label for="ssname" class="xiugailab">姓名</label>
                                        <input type="text" id="ssname" class="xiugaiinput" v-model="ssxgitem.name" >
                                        <label for="sssrc" class="xiugailab">头像</label>
                                        <input type="text" id="sssrc" class="xiugaiinput" v-model="ssxgitem.src" >
                                        <label for="sssex" class="xiugailab">性别</label>
                                        <input type="text" id="sssex" class="xiugaiinput" v-model="ssxgitem.sex" >
                                        <label for="sstel" class="xiugailab">电话</label>
                                        <input type="text" id="sstel" class="xiugaiinput" v-model="ssxgitem.tel" >
                                        <label for="ssemail" class="xiugailab">邮箱</label>
                                        <input type="text" id="ssemail" class="xiugaiinput" v-model="ssxgitem.email" >
                                        <label for="ssidcard" class="xiugailab">身份证号</label>
                                        <input type="text" id="ssidcard" class="xiugaiinput" v-model="ssxgitem.idcard" >
                                        <label for="ssaddress" class="xiugailab">家庭住址</label>
                                        <input type="text" id="ssaddress" class="xiugaiinput" v-model="ssxgitem.address">
                                        <label for="ssuseracc" class="xiugailab">账号</label>
                                        <input type="text" id="ssuseracc" class="xiugaiinput" v-model="ssxgitem.useracc" disabled style="border: 1px solid red">
                                        <label for="ssuserpwd" class="xiugailab">密码</label>
                                        <input type="text" id="ssuserpwd" class="xiugaiinput" v-model="ssxgitem.userpwd" >
                                        <label for="ssposition" class="xiugailab">职位</label>
                                        <input type="text" id="ssposition" class="xiugaiinput" v-model="ssxgitem.position" >
                                        <label for="ssdepartment" class="xiugailab">部门</label>
                                        <input type="text" id="ssdepartment" class="xiugaiinput" v-model="ssxgitem.department" >
                                        <div style="text-align: left;margin-left: 3px">
                                            <label for="Leader" class="xiugailab">直属领导</label>
                                            <input type="text" class="xiugaiinput"  v-model="ssxgitem.leader" >
                                        </div>
                                        <span slot="footer" class="dialog-footer">
                                    <el-button @click="ssxgdialogVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="ssQRXG">确认修改</el-button>
                                    </span>
                                    </el-dialog>
                                    <!--================这是点击修改以后弹出的模态框=======================================-->

                                    <el-button
                                            size="mini"
                                            type="danger">删除
                                    </el-button>


                                    <!--                    @click="handleDelete(scope.$index, scope.row)"-->
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block"><!--这里是分页-->
                            <el-pagination
                                    layout="prev, pager, next"
                                    :total="sousuoData.length"
                                    :page-size="5"
                                    :page-count="7"
                                    @current-change="sschangePage">

                                <!--                            :total="dataNum" ===》数据总条数-->
                                <!--                            :page-size="5" ===》每页5条数据-->
                                <!--                            :page-count="7"===》当超过7页的时候，分页显示省略号-->
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
    </div>
</template>

<script>
    let delArr = [];
    import {mapActions, mapState, mapGetters} from 'vuex'
    import axios from '../../http/http'
    import * as api from '../../http/api'

    export default {
        name: "mxl_jbxx",
        computed: {
            //通过vuex里面的state拿到数据
            //   ！！！！注意：！！！！ 这里拿到tableData的拿值，将tableData赋值给totalData，后面所有的数据都通过totalData来计算，不会再用到tableData，因为如果再用tableData。它始终不会变，是拿过来时候的定值
            ...mapState({
                tableData(state) {
                    //console.log(state.mxl_jbxx.tableData)
                    return this.totalData = state.mxl_jbxx.tableData//将所有的数据装在totalData，方便在删除的时候拿到所有的数据
                }
            }),
            //当前页需要的数据
            currentData() {
                //console.log(1)
                let kaishi = (this.currentPage - 1) * 5;
                let jieshu = (this.currentPage - 1) * 5 + 5;
                //console.log(this.totalData)
                return this.dangqianyeData = this.totalData.slice(kaishi, jieshu)
            },
            //数据总条数
            dataNum() {
                console.log(this.tableData.length)//问题：为什么这里的不能注释这一句话？？？？心态炸了啊
                //console.log(this.totalData.length)
                return this.totalData.length
            },
            //当前页需要的数据
            sscurrentData() {
                //console.log(1)
                let kaishi = (this.currentPage - 1) * 5;
                let jieshu = (this.currentPage - 1) * 5 + 5;
                //console.log(this.totalData)
                return this.ssdangqianyeData = this.sousuoData.slice(kaishi, jieshu)
            },
        },
        data() {
            return {
                //基本信息
                activeName: 'first',//设置这个是为了点击导航栏基本信息以后会自动跳转到第一个选项卡来
                // currentData:[],
                // tableData:[],
                currentPage: 1,//当前页
                dialogVisible: false,//模态框设置为隐藏
                item: {
                    id: '',
                    name: '',
                    src: '',
                    tel: '',
                    email: '',
                    sex: '',
                    idcard: '',
                    address: '',
                    useracc: '',
                    userpwd: '',
                    position: '',
                    department: '',
                    leader: '',
                },//当点击修改按钮后，出现模态框，让本来表单里面的数据赋值到这里data数据里面，在把这里的数据传到input框中，显示出来。与handleEdit函数联系
                dataIndex: '',//当前页五条数据的下标
                dangqianyeData: [],//当前页的五条数据
                totalData: [],
                //======添加员工===========
                tjitem: {//这是添加员工选项卡的item
                    id: '',
                    name: '',
                    src: '',
                    sex: '',
                    tel: '',
                    email: '',
                    idcard: '',
                    address: '',
                    useracc: '',
                    userpwd: '',
                    position: '',
                    department: '',
                    leader: '',
                },
                //======搜索员工===========
                ssitem: '',
                sousuoData: [],
                options: [
                    {
                        value: '1',
                        label: '工号',

                    },
                    {
                        value: '2',
                        label: '姓名',
                    },
                    {
                        value: '3',
                        label: '电话',

                    },
                    {
                        value: '4',
                        label: '身份证号'
                    },
                    {
                        value: '5',
                        label: '账号'
                    },
                    {
                        value: '6',
                        label: '职位'
                    }
                ],
                value: '1',
                ssxgdialogVisible:false,
                ssxgitem: {//这是搜索出来数据以后，点击修改绑定的v-model
                    id: '',
                    name: '',
                    src: '',
                    sex: '',
                    tel: '',
                    email: '',
                    idcard: '',
                    address: '',
                    useracc: '',
                    userpwd: '',
                    position: '',
                    department: '',
                    leader: '',
                },
                ssdangqianyeData:[],
                ssdataIndex: '',//搜索数据页面 当前页五条数据的下标
            }
        },
        methods: {
            //设置表格里面每个字段的字剧中
            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },
            handleClick() {//element组件的属性
            },
            ...mapActions(['Userdata']),
            //点击第几页就显示第几页的数据
            changePage(val) {
                //console.log(val)//代表分页的页码的数字   如：第五页就是5
                this.currentPage = val
                // console.log(this.totalData)
                let kaishi = (val - 1) * 5;
                let jieshu = (val - 1) * 5 + 5;
                // console.log(this.totalData)
                return this.dangqianyeData = this.totalData.slice(kaishi, jieshu)
            },
            //模态框的是否确认关闭
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //当点击修改按钮的函数。。。。修改框的表单拿到当前值
            handleEdit(index, item) {
                this.dialogVisible = true;//当点击修改按钮的时候。模态框出现。
                //console.log(index)//代表下标
                //console.log(item)//代表每一项item
                this.item.id = item.v_id;//a.将那条数据的所有字段信息，用data里面的item装一下，用到上面的input框里面
                this.item.name = item.v_name;
                this.item.src = item.v_src;
                this.item.sex = item.v_sex;
                this.item.tel = item.v_tel;
                this.item.email = item.v_email;
                this.item.idcard = item.v_idcard;
                this.item.address = item.v_address;
                this.item.useracc = item.v_useracc;
                this.item.userpwd = item.v_userpwd;
                this.item.position = item.v_position;
                this.item.department = item.v_department;
                this.item.leader = item.v_leader;
                return this.dataIndex = index//将那条数据的下标返回出去，用dataIndex装一下，用到下面的QRXG函数
            },
            //模态框的确认修改
            QRXG() {
                this.dialogVisible = false;//当点击确认修改按钮的时候。模态框消失。

                //console.log(this.dataIndex)//这里拿到当前页，点击的那一条数据的下标
                //console.log(this.dangqianyeData)//这里拿到当前页的五条数据
                // this.dangqianyeData[this.dataIndex].id=this.item.id;
                // this.dangqianyeData[this.dataIndex].name=this.item.name;
                // this.dangqianyeData[this.dataIndex].src=this.item.src;
                // this.dangqianyeData[this.dataIndex].tel=this.item.tel;
                // this.dangqianyeData[this.dataIndex].email=this.item.email;
                // this.dangqianyeData[this.dataIndex].idcard=this.item.idcard;
                // this.dangqianyeData[this.dataIndex].address=this.item.address;
                // this.dangqianyeData[this.dataIndex].useracc=this.item.useracc;
                // this.dangqianyeData[this.dataIndex].userpwd=this.item.userpwd;
                // this.dangqianyeData[this.dataIndex].position=this.item.position;
                // this.dangqianyeData[this.dataIndex].department=this.item.department;
                // this.dangqianyeData[this.dataIndex].leader=this.item.leader;
                axios({
                    url: api.CHANGEDATA,
                    method: 'post',
                    data: {
                        id: this.item.id,
                        name: this.item.name,
                        src: this.item.src,
                        sex: this.item.sex,
                        tel: this.item.tel,
                        email: this.item.email,
                        idcard: this.item.idcard,
                        address: this.item.address,
                        useracc: this.item.useracc,
                        userpwd: this.item.userpwd,
                        position: this.item.position,
                        department: this.item.department,
                        leader: this.item.leader,
                    },
                }).then(res => {
                    //console.log(res)//这里拿到后台返回的数据
                    if (res.status === 200) {
                        //console.log(this.dangqianyeData)//当前页的数据
                        //console.log(this.dataIndex)//当前页数据的第几条
                        //console.log(this.dangqianyeData[this.dataIndex])
                        //console.log(this.item)//b.因为v-model是双向的，所以当input框里面的东西改变，这里打印this.item，也自然而然会改变

                       // Vue.$set(this.dangqianyeData,this.dataIndex,this.item)
                        //Object.assign(this.dangqianyeData[this.dataIndex],this.item)
                        //this.dangqianyeData.splice(this.dataIndex, 1, this.item)
                        //Vue.set(this.dangqianyeData[this.dataIndex], 'v_name', this.item.name)
                        // 以上四种方法都不会热更新

                        this.dangqianyeData[this.dataIndex] = Object.assign({}, this.dangqianyeData[this.dataIndex], {
                            v_name: this.item.name,
                            v_src: this.item.src,
                            v_sex: this.item.sex,
                            v_tel: this.item.tel,
                            v_email: this.item.email,
                            v_idcard: this.item.idcard,
                            v_address: this.item.address,
                            v_userpwd: this.item.userpwd,
                            v_position: this.item.position,
                            v_department: this.item.department,
                            v_leader: this.item.leader,

                        })

                    }
                }).catch(err => {

                })
            },
            //删除按钮
            handleDelete(index, item) {
                //console.log(index)
                //console.log(item.v_id)
                //console.log(this.totalData)
                // let Myarr = this.totalData.filter(i => {
                //     //console.log(i)
                //     return !(i.v_id === item.v_id)
                // });
                // //console.log(arr)
                // this.totalData = Myarr
                // console.log(this.totalData)
                //
                // delArr.push(item)//将删除的每条数据添加到delArr里面
                // //console.log(delArr)
                // //通过这里将删除的数据放到vuex里面
                // this.$store.dispatch('receiveData', delArr)
                axios({
                    url:api.FAKEDEL,
                    method:'post',
                    data:{id:item.v_id}
                }).then(res=>{
                    //console.log(res)
                    this.totalData=res.data.res
                })
            },
            //==================================添加员工====================================
            QRTJ() {
                //console.log(this.tjitem)
                //判断如果都为空，就不发起请求，如果有一项输入了内容，则发起请求
                if (this.tjitem.name !== '' || this.tjitem.src !== ''
                    || this.tjitem.sex !== '' || this.tjitem.tel !== ''
                    || this.tjitem.email !== '' || this.tjitem.idcard !== ''
                    || this.tjitem.address !== '' || this.tjitem.useracc !== ''
                    || this.tjitem.userpwd !== '' || this.tjitem.position !== ''
                    || this.tjitem.department !== '' || this.tjitem.leader !== '') {
                    axios({
                        url: api.ADDDATA,
                        method: 'post',
                        data: {
                            name: this.tjitem.name,
                            src: this.tjitem.src,
                            sex: this.tjitem.sex,
                            tel: this.tjitem.tel,
                            email: this.tjitem.email,
                            idcard: this.tjitem.idcard,
                            address: this.tjitem.address,
                            useracc: this.tjitem.useracc,
                            userpwd: this.tjitem.userpwd,
                            position: this.tjitem.position,
                            department: this.tjitem.department,
                            leader: this.tjitem.leader,
                        },
                    }).then(res => {
                        console.log(res)
                        if (res.status === 200) {
                            this.$alert('恭喜您添加成功', '提示', {
                                confirmButtonText: '确定',
                            });
                            this.tjitem.name='';
                            this.tjitem.src='';
                            this.tjitem.sex='';
                            this.tjitem.tel='';
                            this.tjitem.email='';
                            this.tjitem.idcard='';
                            this.tjitem.address='';
                            this.tjitem.position='';
                            this.tjitem.leader='';
                        }
                    })
                } else {
                    this.$alert('抱歉！添加失败', '提示', {
                        confirmButtonText: '确定',

                    });
                }


            },
            //==================================搜索员工====================================
            QRSS() {
                //console.log(this.ssitem)
                //console.log(this.options)
                //console.log(12132)
                if (this.ssitem !== '') {
                    //console.log(this.value);
                    if (parseInt(this.value) === 1) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            // console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        });
                    } else if (parseInt(this.value) === 2) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            //console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    } else if (parseInt(this.value) === 3) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            //console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    }else if (parseInt(this.value) === 4) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            //console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    }else if (parseInt(this.value) === 5) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                            //console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    }else if (parseInt(this.value) === 6) {
                        axios({
                            url: api.SSDATA,
                            method: 'post',
                            data: {option: this.ssitem, value: this.value},
                        }).then(res => {
                           // console.log(res)
                            // console.log(res.data.res)
                            if (res.data.res.length === 0) {
                                this.$alert('请重新输入查询条件', '提示', {
                                    confirmButtonText: '确定',
                                });
                            } else {
                                return this.sousuoData = res.data.res
                            }
                        })
                    }
                } else {
                    this.$alert('请输入查询条件', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            //搜索完毕以后，出现数据上面的修改btn
            ssxiugai(index, item){
                this.ssxgdialogVisible=true
               // console.log(item);
                this.ssxgitem.id = item.v_id;//a.将那条数据的所有字段信息，用data里面的item装一下，用到上面的input框里面
                this.ssxgitem.name = item.v_name;
                this.ssxgitem.src = item.v_src;
                this.ssxgitem.sex = item.v_sex;
                this.ssxgitem.tel = item.v_tel;
                this.ssxgitem.email = item.v_email;
                this.ssxgitem.idcard = item.v_idcard;
                this.ssxgitem.address = item.v_address;
                this.ssxgitem.useracc = item.v_useracc;
                this.ssxgitem.userpwd = item.v_userpwd;
                this.ssxgitem.position = item.v_position;
                this.ssxgitem.department = item.v_department;
                this.ssxgitem.leader = item.v_leader;
                return this.ssdataIndex = index//将那条数据的下标返回出去，用ssdataIndex装一下，用到下面的ssQRXG函数
            },
            ssQRXG() {
                this.ssxgdialogVisible = false;//当点击确认修改按钮的时候。模态框消失。
               // console.log(this.item)//b.因为v-model是双向的，所以当input框里面的东西改变，这里打印this.item，也自然而然会改变
                axios({
                    url: api.CHANGEDATA,
                    method: 'post',
                    data: {
                        id: this.ssxgitem.id,
                        name: this.ssxgitem.name,
                        src: this.ssxgitem.src,
                        sex: this.ssxgitem.sex,
                        tel: this.ssxgitem.tel,
                        email: this.ssxgitem.email,
                        idcard: this.ssxgitem.idcard,
                        address: this.ssxgitem.address,
                        useracc: this.ssxgitem.useracc,
                        userpwd: this.ssxgitem.userpwd,
                        position: this.ssxgitem.position,
                        department: this.ssxgitem.department,
                        leader: this.ssxgitem.leader,
                    },
                }).then(res => {
                    //console.log(res)//这里拿到后台返回的数据
                    if (res.status === 200) {
                        //console.log(this.sousuoData)//当前页数据的第几条
                        //console.log(this.ssdangqianyeData)
                        //console.log(this.ssdangqianyeData[this.ssdataIndex])
                        //console.log(this.ssxgitem)
                        this.ssdangqianyeData[this.ssdataIndex] = Object.assign({}, this.ssdangqianyeData[this.ssdataIndex], {
                            v_name: this.ssxgitem.name,
                            v_src: this.ssxgitem.src,
                            v_sex: this.ssxgitem.sex,
                            v_tel: this.ssxgitem.tel,
                            v_email: this.ssxgitem.email,
                            v_idcard: this.ssxgitem.idcard,
                            v_address: this.ssxgitem.address,
                            v_userpwd: this.ssxgitem.userpwd,
                            v_position: this.ssxgitem.position,
                            v_department: this.ssxgitem.department,
                            v_leader: this.ssxgitem.leader,
                        })
                    }
                }).catch(err => {

                })
            },
            sschangePage(val) {
                //console.log(val)//代表分页的页码的数字   如：第五页就是5
                this.currentPage = val
                // console.log(this.totalData)
                let kaishi = (val - 1) * 5;
                let jieshu = (val - 1) * 5 + 5;
                // console.log(this.totalData)
                return this.ssdangqianyeData = this.sousuoData.slice(kaishi, jieshu)
            },
        },
        created() {

           /* axios({
                url: 'http://117.136.62.42:8888/test',
                method: 'get',
                // params: {},
                // transformRequest: [function () {
                //     return JSON.stringify(data)
                // }],
                // headers: {
                //     'Content-Type': 'application/json;'
                // },
            }).then(res => {
                console.log(res);
            })*/

            this.Userdata()
            //     .then(res=>{
            //     console.log(res)
            // //     this.currentData=res.data.data
            // })


        },

    }
</script>

<style scoped>
    /*基本信息选项卡*/
    .btnxg {
        margin-left: 5px;
    }

    .xiugailab {
        font-size: 20px;
        margin-left: 10px;
        display: inline-block;
        width: 80px;
        /*border: 1px solid red;*/
        text-align: left;

    }

    .xiugaiinput {
        width: 160px;
        margin: 5px;
        height: 20px;
        outline: none;
        /*border: 1px solid red;*/
    }

    /*添加员工选项卡*/
    .tjlab {
        display: inline-block;
        width: 100px;
        font-size: 20px;
        /*border: 1px solid red;*/
        text-align: left;
        margin-left: 40px;

    }

    .tjinput {
        width: 500px;
        margin: 10px 15px;
        height: 30px;
        outline: none;
    }

    #btnqrtj {
        margin-top: 100px;
    }

    .btnqrtj {
        width: 100px;
        background-color: #F0696D;
        /*border: 1px solid red;*/
        color: white;
        font-size: 20px;
        padding: 10px;
        cursor: pointer;

    }

    /*查询员工选项卡*/
    .clear {
        content: '';
        display: block;
        clear: both;
    }

    #sslab {
        display: inline-block;
        width: 100px;
        height: 40px;
        line-height: 40px;
        float: left;
        font-size: 20px;
        text-align: center;
        margin-left: 280px;
        /*border: 1px solid red;*/
        background-color: #F0696D;
        color: white;
        border-radius: 3px;
        margin-bottom: 20px;
    }

    #ssinput {
        width: 500px;
        height: 37px;
        outline: none;
        border: 1px solid #DCDFE6;
        float: left;
        border-radius: 5px;

    }

    #sspotions {
        margin-left: 180px;
        float: left;
        width: 100px;
    }

    input::-webkit-input-placeholder {
        font-size: 16px;
    }

</style>
